<template>
  <div style="width: 100%; height: 100%">

    <Header title="周期检测覆盖" />
    <div class="content">
      <table style="width: 100%; height: 100%">
        <th
          class="th_list">
          <td>
            检测类型
          </td>
          <td>
            应覆盖次数
          </td>
          <td>
            检测次数
          </td>
          <td>
            检测里程
          </td>
          <td>
            未覆盖区站
          </td>
        </th>
        <div
          class="tr_list">
          <tr
            v-for="(item,index) in data"
            :key="index"
            class="bg"
            style="

         ">
            <td class="td_list">{{ item.cTypeName }}</td>
            <td class="td_list">{{ item.coverNum }}</td>
            <td class="td_list">{{ item.checkNum }}</td>
            <td class="td_list">{{
              (item.checkMileage.toString().indexOf('.') !== -1) ? item.checkMileage.toLocaleString() : item.checkMileage.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
                + 'KM' }}</td>
            <td class="td_list" style="color:rgba(102, 255, 255, 1); cursor: pointer;" @click="dialog4(item)">{{ item.notCoverSiteNum }}</td>
          </tr>

        </div>
      </table>
    </div>
  </div>
</template>
<script>
import Header from './header.vue'
import { cycleCheckCover } from '@/api/cms/index/index.js'
export default {
  components: {
    Header
  },
  props: {
    deptCode: {
      type: String,
      default: ''
    },
    railTypes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tabs: ['普通', '高铁'],
      current: 0,
      data: []
    }
  },
  watch: {
    railTypes() {
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      cycleCheckCover({
        deptCode: this.deptCode,
        railType: this.railTypes,
        railTypeList: this.railTypes.split(',')
      }).then((res) => {
        this.data = res.data
      })
    },
    dialog4(item) {
      this.$emit('module1Click', { moduleType: 'module4', title: '周期检测覆盖详情', CType: item.cTypeName })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  height: calc(100% - 70px);
  width: 100%;

}
.th_list {
  width: 100%;
  display: flex;
  background:rgba(0, 117, 255, 0.2);
  border-radius: 12px 12px 0px 0px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 16px;
  color: #FFFFFF;

}
.th_list td,
.td_list {
  width: 25%;
}
.tr_list {
  width: 100%;
  height: calc(100% - 36px);
  overflow: auto;
}
.tr_list tr {
  display: flex;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
}
.main {
  display: flex;
  border: 1px solid #149bff;
  border-radius: 5px;
  height: 30px;
}
.header {
  position: relative;
  width: 100%;
  height: 42px;
  display: flex;
  padding: 0 15px;
  justify-content: space-between;
  align-items: center;
}
.tabs {
  background: rgba(4, 24, 56, 0.6);
  font-family: YouSheBiaoTiHei;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  color: rgba(18, 155, 255, 0.7);
  cursor: pointer;
  width: 62px;
  height: 30px;
}
.tabsCurrent {
  background: rgba(11, 56, 129, 0.4);
  box-sizing: border-box;
}
.bg:nth-child(even) {
  background-color: rgba(0, 70, 120, 0.3);
}
.title_bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
</style>
